<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>后台管理_编辑学校专业</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js"></script>
</head>
<body>
<script language="JavaScript">
    var schoolId = ${schoolId};
    var curId = 0;
    var curObj = null;
    function delSpec(obj,id){
        $.post("/man/school/specialty/delete",{id:id},function(result){
            $(obj).parent().remove();
        })
    }
    function saveSpec(){
        alert(curId);
        $.post("/man/school/specialty/update",{id:curId,schoolId:schoolId,name:$("#name").val()},function(result){
            var ret =  eval("("+result+")");
            var span = document.createElement("span");
            if(curId>0){
                $(curObj).parent().children("span").first().text(ret["name"]);
            }else{
                var id = ret["id"];
                $(span).text(ret["name"]);
                var btn_update = $("<button class='btn btn-link' onclick='updateSpec(this,"+id+")'>修改</button>");
                var btn_delete = $("<button class='btn btn-link' onclick='delSpec(this,"+id+")'>删除</button>");
                $("<li class=\"list-group-item\"></li>").append(span,btn_update,btn_delete).appendTo($("ul"));
            }
            cancelUpdate();
        })
    }
    function updateSpec(obj,id){
        var name = $(obj).parent().children("span").first().text();
        curId = id;
        curObj = obj;
        $("#name").val(name);
        $("#btn_cancel").removeClass("hidden");
    }
    function cancelUpdate(){
        curId = 0;
        curObj = null;
        $("#name").val("");
        $("#btn_cancel").addClass("hidden");
    }
</script>
<div class="container" >
    <div class="row">
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label text-right">专业名称</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="name"  name="name" value="">
            </div>
            <div class="col-sm-5"><button class="btn btn-primary" id="btn_save" onclick="saveSpec()">保存</button><button class="btn btn-default hidden" id="btn_cancel" onclick="cancelUpdate()">取消</button></div>
        </div>
    </div>
    <div class="row">
        <ul class="list-group">
            <c:forEach items="${list}" var="spec">
                <li class="list-group-item"><span>${spec.name}</span><button class="btn btn-link" onclick="updateSpec(this,${spec.id})">修改</button><button class="btn btn-link" onclick="delSpec(this,${spec.id})">删除</button></li>
            </c:forEach>
        </ul>
    </div>
</div>

</body>
</html>